<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <title>审批历史</title>
    <div th:replace="common/link::header"></div>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            流程进度审批历史
        </div>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <table id="approvalHistoricTaskTable" lay-filter="approvalHistoricTaskTable"></table>
                </div>
                <div class="layui-col-md6">
                    <div align="center">
                        <img height="100%" width="100%" alt="流程图" id="flowDiagram" onclick="fun.preview(this)"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="common/script::footer"></div>
<script th:inline="javascript">
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'useradmin', 'table'], function() {
        let $ = layui.$,
            form = layui.form,
            table = layui.table,
            processInstanceId = [[${processInstanceId}]];
        $("#flowDiagram").attr("src", ctx + '/workFlow/getCurrentFlowDiagram?processInstanceId=' + processInstanceId);
        // 查询列表接口
        table.render({
            elem: '#approvalHistoricTaskTable',
            height: 'full-110',
            url:  ctx + '/workFlow/historic',
            where:{
                "processInstanceId": processInstanceId
            },
            cellMinWidth: 80,
            page: false,
            parseData: function (result) {
                return {
                    "code":0,
                    "data": result.data
                }
            },
            cols: [[ //表头
                {field: 'name', title: '节点名称'},
                {field: 'assignee', title: '审批人'},
                {field: 'endTime', title: '经办时间'},
                {field: 'comment', title: '审批意见'}
            ]]
        });
    });
</script>
</body>
</html>
